<template>
  <div class="transfer-list" :class="{ 'minimized': isMinimized }" v-show="showTransferList">
    <div class="transfer-header" @click="isMinimized ? store.toggleShow() : null">
      <div class="header-left">
        <i class="fas fa-exchange-alt"></i>
        <span class="title">传输列表</span>
        <span class="count" v-if="activeTasksCount > 0">({{ activeTasksCount }}个进行中)</span>
      </div>
      <div class="header-right">
        <button class="btn-icon" @click.stop="store.toggleMinimize()">
          <i :class="isMinimized ? 'fas fa-window-maximize' : 'fas fa-window-minimize'"></i>
        </button>
        <button class="btn-icon" @click.stop="store.toggleShow()">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
    
    <div class="transfer-body" v-if="!isMinimized">
      <div v-if="tasks.length === 0" class="empty-state">
        暂无传输任务
      </div>
      
      <div v-else class="task-list">
        <div v-for="task in tasks" :key="task.id" class="task-item">
          <div class="task-info">
            <i class="fas fa-file"></i>
            <span class="file-name">{{ task.fileName }}</span>
            <span class="status-text" :class="task.status">
              {{ getStatusText(task.status) }}
            </span>
          </div>
          
          <div class="progress-container" v-if="task.status !== 'completed' && task.status !== 'failed'">
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: `${task.progress}%` }"></div>
            </div>
            <span class="progress-text">{{ task.progress }}%</span>
          </div>
          
          <div class="error-message" v-if="task.status === 'failed'">
            {{ task.error || '上传失败' }}
          </div>
        </div>
      </div>
      
      <div class="transfer-footer" v-if="completedTasksCount > 0 || failedTasksCount > 0">
        <button class="btn-clear" @click="store.clearCompletedTasks()">
          清除已完成
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useTransferStore, type TransferTask } from '../../stores/transferStore';

const store = useTransferStore();

const tasks = computed(() => store.tasks);
const isMinimized = computed(() => store.isMinimized);
const showTransferList = computed(() => store.showTransferList);
const activeTasksCount = computed(() => store.activeTasksCount);
const completedTasksCount = computed(() => store.completedTasksCount);
const failedTasksCount = computed(() => store.failedTasksCount);

const getStatusText = (status: TransferTask['status']) => {
  switch (status) {
    case 'uploading':
      return '上传中';
    case 'indexing':
      return '处理中';
    case 'completed':
      return '已完成';
    case 'failed':
      return '失败';
    default:
      return '';
  }
};
</script>

<style scoped>
.transfer-list {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transition: all 0.3s ease;
}

.transfer-list.minimized {
  width: 200px;
}

.transfer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f5f5f5;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-left i {
  color: #666;
}

.title {
  font-weight: 500;
  color: #333;
}

.count {
  font-size: 0.9em;
  color: #666;
}

.header-right {
  display: flex;
  gap: 8px;
}

.btn-icon {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #666;
  transition: color 0.2s;
}

.btn-icon:hover {
  color: #333;
}

.transfer-body {
  max-height: 400px;
  overflow-y: auto;
  padding: 16px;
}

.empty-state {
  text-align: center;
  color: #999;
  padding: 20px;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-item {
  padding: 12px;
  border-radius: 6px;
  background: #f9f9f9;
}

.task-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-text {
  font-size: 0.9em;
}

.status-text.uploading,
.status-text.indexing {
  color: #2196F3;
}

.status-text.completed {
  color: #4CAF50;
}

.status-text.failed {
  color: #F44336;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #2196F3;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.9em;
  color: #666;
  min-width: 45px;
  text-align: right;
}

.error-message {
  color: #F44336;
  font-size: 0.9em;
  margin-top: 4px;
}

.transfer-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid #eee;
}

.btn-clear {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-clear:hover {
  background: #f0f0f0;
  color: #333;
}
</style>